<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>卡牌图鉴</title>
		<link type="text/css" rel="styleSheet" href="../css/base.css" />
		<link type="text/css" rel="styleSheet" href="../css/cards.css" />
		<script src="../js/jquery-3.4.1.js" type="application/javascript"></script>
		<script src="../js/data.js" type="application/javascript"></script>
		<script src="../js/special_effect.js" type="application/javascript"></script>
		<script type="application/javascript">
			function getTxColor(atttype) {
				if (atttype.indexOf("att") != -1) {
					return "att_color";
				} else if (atttype.indexOf("mag") != -1) {
					return "mag_color";
				} else if (atttype.indexOf("heal") != -1) {
					return "heal_color";
				} else if (atttype.indexOf("arm") != -1) {
					return "arm_color";
				} else {
					return "effect_color";
				}
			}

			function card_compare(c1, c2) {
				if ((c1.star - c2.star) != 0) {
					return c1.star - c2.star;
				} else if ((c1.value - c2.value) != 0) {
					return c1.value - c2.value;
				} else {
					return c1.name.localeCompare(c2.name, "zh");
				}
			};

			function get_cards_from_deck() {
				let tmp_card_arr = [];
				for (i in CardList) {
					tmp_card_arr.push(CardList[i]);
				}
				return tmp_card_arr.sort(card_compare);
			}

			function checkIfInList(tp, lst) {
				let rtn = false;
				for (let i = 0; i < lst.length; i++) {
					if (lst[i] == tp) {
						rtn = true;
					}
				}
				return rtn;
			}

			function initList() {
				$(".content_div_1").html("");
				$(".content_div_2").html("");
				let type_list = [];
				$(".checked").each(function(i, e) {
					type_list.push($(this).attr("type"));
				});
				// console.log(type_list);
				let cntr = 0;
				let cardlist = get_cards_from_deck();
				for (let i = 0; i < cardlist.length; i++) {
					if (!checkIfInList(cardlist[i].type, type_list)) {
						continue;
					}

					let tmp_tx_color = getTxColor(cardlist[i].type);
					let _value = cardlist[i].type == "effect" ? "?" : cardlist[i].value;
					cntr++;
					let tmp_div_str = '<div class="card_div" effect="' + cardlist[i].effect + '">';
					tmp_div_str = tmp_div_str + '<div class="img_div"><img src="../img/' + cardlist[i].img + '"></div>';
					tmp_div_str = tmp_div_str + '<div class="name_div">' + cardlist[i].name + '·' + cardlist[i].star + '☆' + '</div>';
					tmp_div_str = tmp_div_str + '<div class="data_div"><span class="' + tmp_tx_color + '">&nbsp;' + CommonUtil.getAtkType(
							cardlist[i].type) +
						'·' + _value + '&nbsp;</span></div>';
					tmp_div_str = tmp_div_str + '<div class="info_div">';

					tmp_div_str = tmp_div_str + '</div></div>';
					// console.log(tmp_mon);
					if (cntr % 2 == 1) {
						$(tmp_div_str).appendTo($(".content_div_1"));
					} else {
						$(tmp_div_str).appendTo($(".content_div_2"));
					}
				}
				$(".card_div").on("click", function() {
					$(".card_div").removeClass("checked");
					$(this).addClass("checked");
					let effect_name = $(this).attr("effect");
					if (effect_name && effect_name != "undefined") {
						let desc = CardEffect[effect_name].desc;
						$(".effect_div span").text(desc);
					} else {
						$(".effect_div span").text("无");
					}
				});
			}
			$(function() {
				$(".back_div").on("click", function() {
					location.href = "index.html";
				});
				$(".choice").on("click", function() {
					if ($(this).hasClass("checked")) {
						$(this).removeClass("checked");
					} else {
						$(this).addClass("checked");
					}
					initList();
				});

				initList();

			});
		</script>
	</head>
	<body>
		<div class="header_div">卡牌图鉴</div>
		<div class="back_div">
			&lt;-</div>
		<div class="effect_div">
			效果：<span>无</span>
		</div>
		<div class="content_div">
			<div class="content_div_1">
			</div>
			<div class="content_div_2">
			</div>
		</div>
		<div class="footer_div">
			<div class="choice checked" type="attone">物·单</div>
			<div class="choice checked" type="attall">物·全</div>
			<div class="choice checked" type="magone">魔·单</div>
			<div class="choice checked" type="magall">魔·全</div>
			<div class="choice checked" type="heal">治疗</div>
			<div class="choice checked" type="arm">护盾</div>
			<div class="choice checked" type="effect">效果</div>
		</div>
	</body>
</html>
